<template>
	<view>
		<nav-bar title="我的地址"></nav-bar>
		<scroll-view scroll-y :style="{ height: scrollHeight, background: '#FFF' }">
			<view class="address-list">
				<view v-for="(item, index) in addressList" :key="index"
					:class="item.choice||item.choice=== null?'address-item':'address-item choice'">
					<view class="area">{{ item.area }}</view>
					<view class="address">{{ item.address }}</view>
					<view class="user-box">
						<view class="user-name">{{ item.receiverName }}</view>
						<view class="phone">{{ item.phoneNumber }}</view>
					</view>
					<view class="address-btn-box">
						<view class="default-btn">
							<uni-icons v-if="item.isDefault == 0" type="checkbox-filled" color="#0b3f35" size="26"
								@click="clickCancelDefault(item)"></uni-icons>
							<uni-icons v-else type="circle" color="#0b3f35" size="26"
								@click="clickChooseDefault(item)"></uni-icons>
							{{ item.isDefault == 0 ? '已' : '' }}设为默认
						</view>
						<view class="operate-btn">
							<view class="edit-btn" @click.stop="clickEditAddress(item)">编辑</view>
							<view class="delete-btn" @click.stop="clickDelAddress(item)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line" v-if="addressList.length < 1">--- 暂无地址 ---</view>
		</scroll-view>
		<view class="form_bottom_btn">
			<view class="btn-box">
				<view class="confirm" @click="clickAddAddress">新建收货地址</view>
			</view>
		</view>
		<you-popup :popupVisible="tipDialog" :showTitle="false" @cancel="tipDialog = false"
			@popupClose="tipDialog = false" @confirm="confirmDelete">
			<template #popupContent>
				<view class="tip-content">确认要删除这个收货地址吗？</view>
			</template>
		</you-popup>
	</view>
</template>

<script>
	export default {
		name: 'MyAddress',
		data() {
			return {
				storeId: '',
				scrollHeight: '',
				addressList: [],
				tipDialog: false,
				deleteItem: null,
			}
		},
		async onLoad(options) {
			this.storeId = options.storeId
			console.log(this.storeId);
		},
		onShow() {
			this.getAddressList()
		},
		onReady() {
			this.getBottomBoxHeight()
		},
		methods: {
			getBottomBoxHeight() {
				this.$nextTick(() => {
					// 创建查询对象
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this)

						// 选择我们想要的元素
						query.select('.form_bottom_btn').boundingClientRect(data => {
							// data是一个包含元素尺寸信息的对象
							if (data) {
								// 获取元素高度
								const height = data.height
								this.scrollHeight = this.$store.getters.heightData
									.noTabMainHeight - height + this.$store.getters.heightData
									.safeHeight + 'px'
							}
						}).exec()
					}, 200)
				})
			},
			async getAddressList(data) {
				if (this.storeId) {
					const res = await this.$GET(`/fx/address/getDefaultList?id=${this.storeId}`)
					if (res.code == 200) {
						console.log(res)
						this.addressList = res.data
					} else if (res.code == 401 && res.msg == "获取用户ID异常") {
						uni.navigateTo({
							url: '/subPages/home/login'
						})
					}
				} else {
					const res = await this.$GET('/fx/address/list', data)
					if (res.code == 200) {
						console.log(res)
						this.addressList = res.rows
					}
				}
			},
			clickEditAddress(item) {
				uni.redirectTo({
					url: `/subPages/store/editAddress?item=${JSON.stringify(item)}`
				})
			},
			clickDelAddress(item) {
				this.deleteItem = item
				this.tipDialog = true
			},
			async confirmDelete() {
				const res = await this.$DELETE(`/fx/address/${this.deleteItem.id}`)
				if (res.code == 200) {
					this.tipDialog = false
					uni.showToast({
						icon: 'success',
						title: '删除成功'
					})
					this.getAddressList()
				}
			},
			clickAddAddress() {
				uni.redirectTo({
					url: `/subPages/store/editAddress`
				})
			},
			async clickCancelDefault(item) {

			},
			async clickChooseDefault(item) {
				if (item.choice || item.choice === null) {
					console.log(item)
					item.isDefault = 0
					const data = {
						...item
					}
					const res = await this.$PUT('/fx/address', data)
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						this.getAddressList()
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '该地址距离无法进行配送'
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.address-list {
		background-color: #FFF;

		.address-item {
			margin: 0 30rpx;
			padding: 30rpx 0 40rpx;
			border-bottom: 2rpx solid #e6e6e6;

			.area {
				font-size: 20rpx;
				color: #808080;
			}

			.address {
				margin: 8rpx 0 4rpx;
				font-size: 28rpx;
				font-weight: 500;
			}

			.user-box {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.user-name {
					margin-right: 32rpx;
				}
			}

			.address-btn-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 14rpx;

				.default-btn {
					display: flex;
					align-items: center;
					color: #126352;
				}

				.operate-btn {
					display: flex;
					align-items: center;

					.edit-btn,
					.delete-btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 140rpx;
						height: 58rpx;
						border: 2rpx solid #126352;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #126352;
					}

					.delete-btn {
						margin-left: 20rpx;
						border: 2rpx solid #000;
						color: #000;
					}
				}
			}
		}

		.choice {
			color: #ddd;
		}
	}

	.line {
		font-size: 28upx;
		color: #333333;
		text-align: center;
		margin-top: 100upx;
	}

	.tip-content {
		padding: 64rpx 0;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
	}
</style>